const gulp = require("gulp");
const connect = require("gulp-connect");
const htmlmin = require("gulp-htmlmin");
const uglify  = require("gulp-uglify");
const babel  = require("gulp-babel");
const sass   = require("gulp-sass")(require('sass'));
const cssmin = require("gulp-cssmin");

gulp.task("sayhi" , async ()=>{
      console.log( "hello gulp" );
});

gulp.task("connect" , async ()=>{
      connect.server({
            livereload : true
      });
});

// 1. 新增一个html功能，可以转存src之中的所有.html 文件; 

gulp.task("html" , async ()=>{
      gulp.src(["./src/**/*.html"])
      .pipe( gulp.dest("./dist"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("html-min" , async ()=>{
      gulp.src(["./src/**/*.html"])
      .pipe( htmlmin({ collapseWhitespace: true }) )
      .pipe( gulp.dest("./dist"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("javascripts" , async ()=>{
      gulp.src(["./src/javascripts/**/*.js"])
      .pipe( gulp.dest("./dist/javascripts"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("javascripts-min" , async ()=>{
      gulp.src(["./src/javascripts/**/*.js"])
      .pipe(uglify())
      .pipe( gulp.dest("./dist/javascripts"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("javascripts-babel" , async ()=>{
      gulp.src(["./src/javascripts/**/*.js"])
      .pipe(babel({
            presets: ['@babel/env']
      }))
      // uglify 在某些场景下压缩 babel转义之后的代码会发生报错; 
      // - 如果遇到这种情况， 我们暂时只能两个插件二选一; 
      .pipe( uglify() )
      .pipe( gulp.dest("./dist/javascripts"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("scss" , async ()=>{
      gulp.src(["./src/scss/**/*.scss"])
      .pipe(sass().on('error', sass.logError))
      .pipe( gulp.dest("./dist/css/"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});

gulp.task("scss-min" , async ()=>{
      gulp.src(["./src/scss/**/*.scss"])
      .pipe(sass().on('error', sass.logError))
      .pipe(cssmin())
      .pipe( gulp.dest("./dist/css/"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
});


// 2. 我们在开启服务器之后命令行就不能输入新的指令了 , 提前做好html指令调用的逻辑
gulp.task("watch" , async ()=>{
      gulp.watch(["./src/**/*.html"] , gulp.parallel("html"));
      gulp.watch(["./src/javascripts/**/*.js"] , gulp.parallel("javascripts"));
      gulp.watch(["./src/scss/**/*.scss"] , gulp.parallel("scss"));
});


// 3. 我们如何同时开启watch和connect两个指令; 

gulp.task("default" , gulp.series("html","scss","javascripts" , gulp.parallel("connect" , "watch")));

// 做一个组合指令 : 

gulp.task("build" , gulp.series("html-min" , "scss-min" , "javascripts-min"));

